<template>
	<div class="container">
		<div class="box">
			<span class="integral">
				您目前累计获得：<span class="num">456</span>积分
			</span>
		</div>
		<table>
			<thead>
				<tr>
					<th >积分规则</th>
					<th>规则类型</th>
					<th>积分</th>
					<th>更新时间</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>查看新闻得积分</td>
					<td>查看文章积分</td>
					<td>10</td>
					<td>2018-2-22</td>
				</tr>
				<tr>
					<td>学习视频得积分</td>
					<td>学习视频积分</td>
					<td>10</td>
					<td>2018-2-22</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
</script>

<style scoped="scoped">
	.box{
		margin-top: 20px;
		margin-bottom: 50px;
	}
	.integral{
		padding: 25px 20px;
		border-radius: 5px;
		background-color: #FFFCED;
	}
	.num{
		vertical-align: middle;
		padding-right: 5px;
		font-size: 30px;
		color:#C50C12
	}
	table{
		width:100%;
	}
	thead{
		line-height: 35px;
		background-color: #FFFCED;
		color: #666
	}
	thead th,tbody td{
		width: 25%;
		text-align: center;
	}
	tbody tr{
		line-height: 50px;
		color: #b1b1b1;
	}
	tbody tr td{
		border-bottom: 1px solid #F6F6F6;
	}
</style>
